﻿<html>
  <head>
    <meta charset="utf-8">
    <title>aggrolist</title>
    <link rel="stylesheet" href="aggrolist.css">
  </head>

  <body id="aggrolist" v-class="resize-handle: !locked">
    <div class="{{hide ? 'hide' : ''}} outer">
      <div class="inner">
        <div class="background"></div>
          <div v-if="!updated" class="gold">
            <span>无数据传入.</span>
          </div>
          <div v-if="updated">
            <table id="combatants" v-show="!collapsed">
              <thead class="gold">
                <tr>
                  <th class="text-left">仇恨</th>
                  <th class="text-left">目标</th>
                  <th class="test-left">血量%</th>
                  <th class="test-left" style="width: 5em">目标的目标</th>
                </tr>
              </thead>
             <tbody class="blue">
             <template v-repeat="combatant: combatants">
               <tr class="{{combatant.isCurrentTarget ? '' : ''}}">
                <td class="text-right" style="width: 4em"><div style="margin: 1px; padding-right: 1px" class="{{combatant.hatecolor}}">{{combatant.isCurrentTarget ? " ➸ " : "  "}}{{combatant.HateRate}}%</div></td>
                <td class="text-left" colspan="2">
                  <div class="box">
                    <div class="content">{{combatant.Name}}<span style="float: right">{{combatant.HPPercent}}%</span>
                    </div>
                    <div class="gauge {{combatant.hpcolor}}" style="width: {{combatant.HPPercent}}%" />
                  </div>
                </td>
                 <td class="text-center"><div style="margin: 1px; padding-right: 1px" class="{{combatant.Target | jobrole}}">{{combatant.Target.isMe ? "YOU" : combatant.Target.isPet ? "PET" : combatant.Target.JobName}}</div></td>
              </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="aggrolist.js"></script>
  </body>
</html>

